<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<script src="js/register.js"></script>
		<link href="css/loginandregister.css" rel="stylesheet" type="text/css" />
		<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
			rel="stylesheet">
		<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>

	<body>
		<div class="rg_layout">
			<div class="rg_left">
				<p style="color: white;">USER REGISTER</p>
				<p style="color: white;">新用户注册</p>
			</div>
			<div class="rg_center">
				<div class="rg_form" style="position: relative; top: 100pt;left: 70pt;">
					<form action="#" id="form" onsubmit="return true">
						<table>
							<tr>
								<td class="td_left"><label for="username"><i style="color: azure;">用户名</i></label></td>
								<td class="td_right">
									<!-- onblur监听用户输入的值 -->
									<input type="text" name="username" id="username" required
										placeholder="请输入用户名(6到10位大小写数字)" onblur="checkUsername(this.value)">
									<span id="s_username" class="error"></span>
								</td>
							</tr>

							<tr>
								<td class="td_left"><label for="password"><i style="color: azure;">密码</i></label></td>
								<td class="td_right">
									<span class="box">
										<input type="password" name="password" id="password" required
											placeholder="请输入密码(6到10位大小写数字)">
										<label for="password">
											<img src="img/close.png" alt="" id="eye1">
										</label>
									</span>
									<span id="s_password" class="error"></span>
								</td>
							</tr>

							<tr>
								<td class="td_left"><label for="password2"><i style="color: azure;">请确认密码</i></label>
								</td>
								<td class="td_right">
									<span class="box">
										<input type="password" name="password2" id="password2" required
											placeholder="请再次输入密码(6到10位大小写数字)">
										<label for="password2">
											<img src="img/close.png" alt="" id="eye2">
										</label>
									</span>
									<span id="s_password2" class="error"></span>
								</td>
							</tr>

							<tr>
								<td class="td_left"><label for="name"><i style="color: azure;">ID-User</i></label></td>
								<td class="td_right"><input type="text" name="name" id="name" required
										placeholder="请输入ID"></td>
							</tr>


							<tr>
								<td class="td_left"><label for="age"><i style="color: azure;">Age</i></label></td>
								<td class="td_right"><input type="text" name="age" id="age" required
										placeholder="请输入Age"></td>
							</tr>

							<tr>
								<td class="td_left"><label for="checkcode"><i style="color: azure;">验证码</i></label></td>
								<td class="td_right"><input type="text" name="checkcode" required id="checkcode"
										placeholder="请输入验证码">
									<img id="img_check" src="img/code.png">
									<span class="error" id="code_input">

								</td>
							</tr>

							<tr>
								<td colspan="2" id="td_sub">
									<input type="submit" id="btn_sub" value="注 册" onclick="checkform();">
									<input type="reset" id="btn_subs" value="重 置">
								</td>
							</tr>

						</table>
					</form>
					<p class="para">已有账号?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="login.html" target="_self"
							style="color: #844200;">立即登录</a></p>
				</div>
			</div>
		</div>

		<script>
			//获取ID内容
			var eye1 = document.getElementById('eye1');
			var password = document.getElementById('password');
			var flag1 = 0;
			//触发点击事件 处理程序
			eye1.onclick = function() {
				//点击一次后 flag一定要变化
				if (flag1 == 0) {
					password.type = 'text';
					eye1.src = 'img/open.png';
					flag1 = 1;
				} else {
					password.type = 'password';
					eye1.src = 'img/close.png';
					flag1 = 0;
				}
			}
			var eye2 = document.getElementById('eye2');
			var password2 = document.getElementById('password2');
			var flag2 = 0;
			//注册事件 处理程序
			eye2.onclick = function() {
				//点击一次后 flag一定要变化
				if (flag2 == 0) {
					password2.type = 'text';
					eye2.src = 'img/open.png';
					flag2 = 1;
				} else {
					password2.type = 'password';
					eye2.src = 'img/close.png';
					flag2 = 0;
				}
			}
			//检查名字是否重复
			$("#username").blur(
				function() {
					var xhr = new XMLHttpRequest();
					//2，设置状态监听
					xhr.onreadystatechange = function() {
						if (xhr.readyState === 4) {
							if (xhr.status >= 200 & xhr.status < 300) {
								var result = xhr.response;
								console.log(result);
								if (result==true) {
									console.log(2);
									alert("名字以重复，请更换");
									document.getElementById("username").value = null;
									console.log(3);
								}

							}

						}
					}
					//3，建立与服务端的连接Get(get请求传参，要将参数拼接到URl中)
					let name = document.getElementById("username").value; //获取表单中name对应的value属性值
					console.log(4);
					xhr.open("GET", "http://localhost:8080/doCheck?name=" + name, true);
					//4，发送请求
					xhr.send();
				}
			)

			//userid 的自动输入
			$("#name").focus(function() {

				var xhr = new XMLHttpRequest();
				//2，设置状态监听
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 & xhr.status < 300) {
							var result = xhr.responseText;
							console.log(result);
							document.getElementById("name").value = result;

						}

					}
				}
				//3，建立与服务端的连接Get(get请求传参，要将参数拼接到URl中)
				console.log(1);
				xhr.open("GET", "http://localhost:8080/getnextidcount", true);
				//4，发送请求
				xhr.send();


			});

			//注册的验证
			$("#btn_sub").click(function() {

				var username = $("#username").val();
				var pass = $("#password").val();
				var uiserdeid = $("#name").val();
				var ag = $("#age").val();
				$.ajax({
					url: "http://127.0.0.1:8080/saveUser",
					data: {
						id: uiserdeid,
						name: username,
						age: ag,
						password: pass
					},
					type: "post",
					dataType: "json",
					success: function(result) {
						if (result) {
							window.alert("注册成功！");
							//跳转
						}
					},
					error: function(err) {
						console.log(err);
					},

				});



			});
		</script>
	</body>
</html>
